<template>
<div class="container
">
  <homeCard :has-more="false">
    <homeCardTabs slot="title" @handlerClick="handlerClick" :list="list"></homeCardTabs>
    <div v-loading="loading">
      <div class="imgBox" v-if="tableList.length==0 && seleted==0">
        <img src="../../../assets/xinxidaiban.png" alt="">
      </div>
      <div class="imgBox" v-if="tableList.length==0 && seleted==1">
        <img src="../../../assets/xinxiyiban.png" alt="">
      </div>
      <noticeItem class="noticeItem" :params="item" v-for="(item,index) in tableList" :key="index"></noticeItem>
    </div>

  </homeCard>
</div>
</template>

<script>
import homeCard from "@/views/Home/module/homeCard";
import noticeItem from "@/views/Home/module/noticeItem";
import homeCardTabs from "@/views/Home/module/homeCardTabs";
export default {
  name: "notice",
  components:{
    homeCard,
    noticeItem,
    homeCardTabs
  },
  mounted() {
    this.getMessage()
    this.queryMessageNum()
  },
  methods:{
    handlerClick(item){
      this.seleted = item.value
      this.getMessage()
    },
    queryMessageNum(){
      this.$api.queryMessageNum().then(res=>{
        this.list[0].num = res.data.unDoneNum
        this.list[1].num = res.data.doneNum
      })
    },
    getMessage(){
      let url = this.seleted == 0?'queryUndoneMessage':'queryDoneMessage'
      let params = {
        page:0,
        pageSize:2
      }
      this.loading = true
      this.$api[url](params).then(res=>{
        this.loading = false
        this.tableList = res.data.data
        this.list[this.seleted].num = res.data.recordsTotal
      })
    },
  },
  data(){
    return {
      seleted:0,
      tableList:[],
      loading:false,
      list:[
        {
          title:'待办消息',
          num:0,
          value:0
        },{
          title:'已办消息',
          num:0,
          value:1
        },
      ]

    }
  },
}
</script>

<style scoped lang="less">
.container{
  width: 91.9rem;
  height: 43.7rem;
  // height: 48.7rem;
  .noticeItem{
    margin-bottom: 15px;
    &:last-child{
      margin-bottom: 0;
    }
  }
  .imgBox{
    width: 90rem;
    height: 40rem;
    // height: 45rem;
    display: flex;
    align-items: center;
    justify-content: center;
    img{
      width: 26.7rem;
      //height: 20.4rem;
    }
  }
}
</style>
